<template>
    <div>
        <header class="mb-30">
            <span>报告年份</span>
            <el-select
                :popper-append-to-body="false"
                class="mx-15 w-160 my-select"
                v-model="searchParams.year"
                @change="changeYear"
                placeholder="请选择报告年份"
            >
                <el-option
                    v-for="(year, i) in yearArr"
                    :key="i"
                    :label="year"
                    :value="year"
                ></el-option>
            </el-select>
            <span>报告类型</span>
            <el-select
                :popper-append-to-body="false"
                class="mx-15 w-160 my-select"
                v-model="searchParams.reportCode"
                @change="changeType"
                placeholder="请选择报告类型"
            >
                <el-option
                    v-for="(item, i) in reportTypeOption"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <span>报告名称</span>
            <el-input
                placeholder="请输入报告名称"
                class="w-160 mx-15"
                v-model="searchParams.name"
                clearable
            >
            </el-input>
            <!-- <span>参与编制人</span>
            <el-input
                placeholder="请输入编制人"
                class="w-160 mx-15"
                v-model="searchParams.reportMember"
                clearable
            >
            </el-input> -->
            <span>报告编写状态</span>
            <el-select
            :popper-append-to-body="false"
                class="mx-15 w-160 my-select"
                v-model="searchParams.reportEditStatus"
                @change="changeType"
                placeholder="请选择报告编写状态"
            >
                <el-option
                    v-for="(item, i) in reportEditStatusOption"
                    :key="i"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
            </el-select>
            <el-button type="primary" size="small" @click="search(true)"
                >查询</el-button
            >
            <el-button size="small" class="blue-btn" @click="open"
                >开放编写</el-button
            >
            <el-button size="small" class="blue-btn" @click="doNot"
                >禁止编写</el-button
            >
        </header>
        <el-table
            :data="tableData"
            size="medium"
            style="width: 100%"
            stripe
            ref="multipleTable"
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                align="center"
                type="selection"
                width="50"
            ></el-table-column>
            <el-table-column
                align="center"
                type="index"
                label="序号"
                width="60"
            ></el-table-column>
            <el-table-column align="center" prop="reportYear" label="报告年份">
            </el-table-column>
            <el-table-column align="center" label="报告类型">
                <template slot-scope="scope">{{
                    scope.row.reportIndex | filteReportType
                }}</template>
            </el-table-column>
            <el-table-column align="center" prop="reportName" label="报告名称">
            </el-table-column>
            <el-table-column
                align="center"
                prop="reportMember"
                label="参与编制人"
            >
            </el-table-column>
            <el-table-column
                align="center"
                prop="reportCreateUser"
                label="报告创建人"
            >
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="mt-30 text-center">
            <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="searchParams.pageIndex"
                layout="prev, pager, next, jumper"
                prev-text="上一页"
                next-text="下一页"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import {
    getLevelCode,
    editProhibitStatus,
    conditionalPaginations
} from '@/api/report';
export default {
    name: 'EditStatusManage',
    data () {
        return {
            yearArr: this.$config.yearArr(),
            reportTypeOption: [],
            reportEditStatusOption: [
                { label: '开放编写', value: 1 },
                { label: '禁止编写', value: 0 }
            ],
            searchParams: {
                year: null,
                reportCode: null,
                name: null,
                reportMember: null,
                reportEditStatus: null,
                pageIndex: 1,
                pageSize: 10
            },
            total: 20,
            tableData: [],
            multipleSelection: []
        };
    },
    created () {
        this.init();
    },
    mounted () {},
    methods: {
        init () {
            this.search();
            getLevelCode().then(res => {
                console.log(res, 'getLevelCode');
                this.reportTypeOption = res;
            });
        },
        // 诊改阶段
        changeYear (val) {},
        // 报告类型
        changeType (val) {},
        search (type) {
            const searchParams = type
                ? this.searchParams
                : {
                      pageIndex: this.searchParams.pageIndex,
                      pageSize: this.searchParams.pageSize
                  };
            conditionalPaginations(searchParams).then(res => {
                this.tableData = res.dataList;
                this.searchParams.pageSize = res.pageSize;
                this.total = res.total;
                console.log(res, 'conditionalPaginations');
            });
        },
        isNull () {
            if (this.multipleSelection.length < 1) {
                this.message('error', '请至少选择一项报告');
                return false;
            }
            return true;
        },
        open () {
            if (!this.isNull()) {
                return false;
            }
            const ids = [];
            this.multipleSelection.map(item => {
                ids.push(item.id);
            });
            // console.log(true, this.multipleSelection);
            editProhibitStatus(ids, 1).then(res => {
                console.log(res);
                this.message('success', '操作成功!');
            });
        },
        doNot () {
            if (!this.isNull()) {
                return false;
            }
            // console.log(false, this.multipleSelection);
            const ids = [];
            this.multipleSelection.map(item => {
                ids.push(item.id);
            });
            // console.log(true, this.multipleSelection);
            editProhibitStatus(ids, 0).then(res => {
                this.message('success', '操作成功!');
            });
        },
        handleSelectionChange (val) {
            this.multipleSelection = val;
            console.log(val);
        },
        // 表格数据
        handleCurrentChange (val) {
            this.searchParams.pageIndex = val;
            console.log(`当前页: ${val}`, this.searchParams.pageIndex);
            this.search();
        },
        handleSizeChange (val) {
            console.log(`每页 ${val} 条`);
        }
    }
};
</script>

<style lang="scss" scoped>

.blue-btn {
    background: #169bd5;
    color: #fff;
    &:hover {
        background: #27b0eb;
        border-color: #27b0eb;
    }
    &:active {
        background: #169bd5;
    }
}
</style>
